<template>
  <view class="main">
	 
    <view class="title">请输入支付密码</view>
    <view class="item" @tap='KeyboarOpen'>
      <password-input  data-key='0' :numLng='valArr[0].val'></password-input>
    </view>
	<view class="zhaohui" @tap="$util.toUrl('./zhaohuizhifumima')">找回密码</view>

	<view class="" style="padding:0 54rpx 80rpx;" >
		<submitButtom text="确认" margintop="40rpx" :buttonMethod="submit"></submitButtom>
	</view>
	
    <number-keyboard ref='KeyboarHid' tabBar v-model="value" @input='onInput' :psdLength='valArr[currentKey].lng'></number-keyboard>
  </view>
</template>

<script>
  import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'
  import passwordInput from '@/components/password-input/password-input.vue'
  import submitButtom from "@/components/submit-button/submit-button.vue"
  
  export default {
    components: {
      numberKeyboard,
      passwordInput,
	  submitButtom
    },
    data() {
      return {
        password: "", //输入的内容
        value: "",
        currentKey: 0,
        valArr: [{val:'',lng:6},{val:'',lng:11},{val:'',lng:4}],
      }
    },
    onLoad() {
      //因为此时实例没有挂载完成，需要延迟操作
      setTimeout(() => {
        this.$refs.KeyboarHid.open()
      }, 50)
    },
    methods: {
      //打开键盘
      KeyboarOpen(e) {
        console.log(e)
        let eq = e.target.dataset.key;
        this.currentKey = eq;
        this.value = this.valArr[eq].val
        this.$refs.KeyboarHid.open()
      },
      //输入的值
      onInput(val) {
        this.valArr[this.currentKey].val=val
      },
	  submit:function(){
		  
	  }
    }
  }
</script>

<style scoped lang="scss">
	.zhaohui{
		text-align: right;
		padding-top: 20rpx;
		color: $uni-color-primary;
	}
  .main {
    padding: 0rpx 40rpx;
  }

  .ipt {
    border-bottom: 1rpx solid #CCCCCC;
  }

  .item {
    padding: 10rpx 0rpx;
  }

  .title {
    margin: 100rpx 0 30rpx;
	text-align: center;
	height:40rpx;
	font-size:28rpx;
	font-weight:400;
	color:rgba(51,51,51,1);
	line-height:40rpx;
  }
</style>
